<!--
 * @Author: wangkg wangkegui@longfor.com
 * @Date: 2024-05-10 18:10:43
 * @Description: 
-->
<template>
  <el-dropdown @command="handleDropdown">
    <span :class="[prefixCls]" class="flex">
      <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" />
      <span :class="`${prefixCls}__info hidden md:block`">
        <span :class="`${prefixCls}__name`" class="truncate">
          {{ getUserInfo.realName }}
        </span>
      </span>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="menu in menuList" :key="menu.value" :command="menu.value">{{
          menu.label
        }}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { getGlobalCls } from '@/utils/index';
import headerImg from '@/assets/images/header.jpg';

type DropType = 'logout';
interface MenuType {
  value: String;
  label: String;
}
defineOptions({ name: 'UserDropdown' });

const { prefixCls } = getGlobalCls('header-user-dropdown');
const userStore = useUserStore();

const getUserInfo = computed(() => {
  const { realName = '', avatar, desc, userFullName } = userStore.getUserInfo as any;
  return { realName: userFullName || realName, avatar: avatar || headerImg, desc };
});
const menuList = [
  {
    value: 'logout',
    label: '退出系统',
    funC: handleLoginOut
  }
];
//  login out
function handleLoginOut() {
  userStore.confirmLoginOut();
}
const handleDropdown = (e: DropType) => {
  const targetObj = menuList.find((item: MenuType) => {
    const { value } = item;
    return value === e;
  });
  if (targetObj) {
    const { funC } = targetObj;
    if (funC) {
      funC();
    }
  }
};
</script>
<style lang="scss">
$prefix-cls: #{config.$namespace}-header-user-dropdown;

.#{$prefix-cls} {
  align-items: center;
  height: config.$header-height;
  padding: 0 0 0 10px;
  padding-right: 10px;
  overflow: hidden;
  font-size: 12px;
  cursor: pointer;
  display: flex;

  img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }

  &__header {
    border-radius: 50%;
  }

  &__name {
    font-size: 14px;
  }

  &--dark {
    &:hover {
      background-color: var(--header-bg-hover-color);
    }
  }

  &--light {
    &:hover {
      background-color: #f6f6f6;
    }

    .#{$prefix-cls}__name {
      color: var(--text-color);
    }

    .#{$prefix-cls}__desc {
      color: #7c8087;
    }
  }
}
</style>
